<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { computed, ref } from 'vue'

interface Props {
  modelValue: boolean
  appointmentId: number
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 数据状态
const loading = ref(false)
const logs = ref([])

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: value => emit('update:modelValue', value),
})

// 加载日志
async function loadLogs() {
  if (!props.appointmentId)
    return

  loading.value = true
  try {
    const response = await window.api.appointment.operationLogs(props.appointmentId)
    if (response.success) {
      logs.value = response.data
    }
    else {
      ElMessage.error(response.error || '加载日志失败')
    }
  }
  catch (error) {
    console.error('加载日志失败:', error)
    ElMessage.error('加载日志失败')
  }
  finally {
    loading.value = false
  }
}

// 工具函数
function getLogType(status) {
  return status === 'success' ? 'success' : 'danger'
}

function getOperationText(operationType) {
  const texts = {
    create: '创建记录',
    update: '更新记录',
    book: '执行预约',
    cancel: '取消预约',
    release: '释放占号',
  }
  return texts[operationType] || operationType
}

function formatDateTime(timestamp) {
  if (!timestamp)
    return ''
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

function formatOperationData(dataStr) {
  try {
    const data = JSON.parse(dataStr)
    return JSON.stringify(data, null, 2)
  }
  catch {
    return dataStr
  }
}
</script>

<template>
  <el-dialog
    v-model="visible"
    title="操作日志"
    width="800px"
    @open="loadLogs"
  >
    <div v-loading="loading">
      <el-timeline v-if="logs.length > 0">
        <el-timeline-item
          v-for="log in logs"
          :key="log.id"
          :timestamp="formatDateTime(log.timestamp)"
          :type="getLogType(log.result_status)"
        >
          <el-card class="log-card">
            <div class="log-header">
              <span class="log-operation">{{ getOperationText(log.operation_type) }}</span>
              <el-tag
                :type="log.result_status === 'success' ? 'success' : 'danger'"
                size="small"
              >
                {{ log.result_status === 'success' ? '成功' : '失败' }}
              </el-tag>
            </div>

            <div class="log-content">
              <p v-if="log.result_message" class="log-message">
                {{ log.result_message }}
              </p>

              <div v-if="log.operation_data" class="log-data">
                <el-collapse>
                  <el-collapse-item title="详细数据" name="data">
                    <pre>{{ formatOperationData(log.operation_data) }}</pre>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>

            <div class="log-footer">
              <span class="log-operator">操作者: {{ log.operator }}</span>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <el-empty v-else description="暂无操作日志" />
    </div>
  </el-dialog>
</template>

<style scoped>
.log-card {
  margin-bottom: 8px;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.log-operation {
  font-weight: 500;
  font-size: 16px;
}

.log-content {
  margin-bottom: 12px;
}

.log-message {
  margin: 0 0 8px 0;
  color: #666;
}

.log-data {
  margin-top: 8px;
}

.log-data pre {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.log-footer {
  text-align: right;
  font-size: 12px;
  color: #999;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
}
</style>
